<template>
  <div>
    <el-card class="header-card">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-input placeholder="请输入关键字查询" suffix-icon="el-icon-search" v-model="searchFormData.KeyName"
                        style="width: 70%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-row>
              <el-col :span="9">
                <el-form-item label="工序:">
                  <ASelect :options="workStage" v-model="searchFormData.TechId === 0 ? '' : searchFormData.TechId"
                           :value.sync="searchFormData.TechId"
                           :label-attr-name="'Name'" :val-attr-name="'TechId'"
                  ></ASelect>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="商户名:">
                  <ASelect filterable remote :remote-method="getShopName" :loading="loading" v-model="searchFormData.ShopId"
                           :options="shopNames"  :label-attr-name="'Name'" :value.sync="searchFormData.ShopId"
                           :val-attr-name="'ShopId'"
                  ></ASelect>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="8">
            <el-form-item label="单号:">
              <el-input v-model="searchFormData.netOrderId" placeholder="请输入单号" style="width: 70%"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="开单时间:">
              <el-date-picker
                v-model="dateTime"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                style="width: 92.5%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8" class="operator-button">
            <el-form-item>
              <el-button type="primary" @click="getData" icon="el-icon-search">查询</el-button>
              <ExportFileButton :column-des-objs="exportColumnDesObjs" @export="exportData">
                <el-button type="success" icon="el-icon-download">导出</el-button>
              </ExportFileButton>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="data-table">
      <AzureDynamicTable :column-des-objs="columnDesObjs" :data="tableData" :show-seq="true">
        <template slot="operator" slot-scope="{scope:{row}}">
          <el-tag :type="row['opStatus'] === 0 ? 'danger' : 'success'">{{row['DisplayOpStatus']}}</el-tag>
        </template>
      </AzureDynamicTable>
    </el-card>

    <el-card class="pagination-footer">
      <Pagination :total="total" :page.sync="PageIndex" :limit.sync="PageSize" @pagination="getData"
                  :page-sizes="PageSizes"
                  v-show="total>0" class="pagination"></Pagination>


    </el-card>
  </div>
</template>

<script>
  import ASelect from '@/components/ATheFridayClub/ASelect'
  import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
  import { GetTechOrderProductDoing, GetTechForFactory, GetShops } from '@/api/productionStat'
  import { ERR_OK } from '@/utils/commons'
  import Pagination from '@/components/ATheFridayClub/Pagination'
  import moment from 'moment'
  import ExportFileButton from '@/components/ATheFridayClub/export/ExportFileButton.vue'

  export default {
    name: 'productionStat',
    components: { ASelect, AzureDynamicTable, Pagination, ExportFileButton },
    data() {
      return {
        tableData: [],
        columnDesObjs: [
          { label: '商户名', key: 'ShopName', width: 230 },
          { label: '单号', key: 'NetOrderId', width: 170 },
          { label: '客户名', key: 'CtmName', width: 230 },
          { label: '产品号', key: 'OrderProductId', width: 140 },
          { label: '产品名', key: 'produtName', width: 240 },
          { label: '规格', key: 'ProductSize', width: 140 },
          { label: 'P数', key: 'FileNum', width: 140 },
          { label: '面积', key: 'photoArea', width: 140 },
          { label: '开单时间', key: 'ordertime', dateFormat: true, width: 230 },
          { label: '完成时间', key: 'CompletedTime', dateFormat: true, width: 230 },
          { label: '工序', key: 'TechName', width: 140 },
          { label: '进度', key: 'operator', width: 140 }
        ],
        PageIndex: 1,
        PageSize: 10,
        PageSizes: [10, 50, 100, 200],
        total: '',
        dateTime: [moment(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 3)).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD')],
        searchFormData: {
          ShopId: '',
          TechId: 0,
          netOrderId: '',
          StOrderTime: '',
          EndOrderTime: '',
          KeyName: '',
        },
        loading: false,
        workStage: [],
        shopNames: [],
        tagStatus: 'primary',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    async created() {
      await this.getData()
      await this.getTechFactory()
    },
    computed: {
      exportColumnDesObjs() {
        const columnDesObjs = [...this.columnDesObjs]
        columnDesObjs.pop()
        columnDesObjs.push({ label: '进度', key: 'DisplayOpStatus', width: 230 })
        return columnDesObjs
      }
    },
    methods: {
      async exportData({ resolve, reject }) {
        try {
          resolve(await this.getData({ PageIndex: 1, PageSize: 10000000, isExport: true }))
        } catch (e) {
          reject(e)
        }
      },
      async getData({ PageIndex = this.PageIndex, PageSize = this.PageSize, isExport = false } = {}) {
        try {
          this.searchFormData.StOrderTime = this.dateTime[0]
          this.searchFormData.EndOrderTime = this.dateTime[1]
          const { Code, Result } = await GetTechOrderProductDoing({ PageIndex, PageSize, ...this.searchFormData })
          if (Code === ERR_OK) {
            const { Items, TotalNum, CurrentPage } = Result
            if (isExport) {
              return Items
            }
            this.tableData = Items
            this.PageIndex = CurrentPage
            this.total = TotalNum
          }
        } catch (e) {
          console.error(e)
          throw e
        }
      },
      async getTechFactory() {
        const { Code, Result } = await GetTechForFactory()
        if (Code === ERR_OK) {
          this.workStage = Result
        }
      },
      async getShopName(query) {
        if(query !== ''){
          console.log(query,206)
          this.loading = true;
          const { Result, Code } = await GetShops({inKey:query})
          if(Code === ERR_OK){
            const {Items} = Result
            this.shopNames = Items
            this.loading = false;
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .header-card {
    margin: 12px 12px 12px 12px;
  }

  .data-table {
    margin: 12px 12px 12px 12px;
  }

  .pagination-footer {
    margin: 12px 12px 12px 12px;

    .pagination {
      padding-top: 0;
    }
  }

</style>
